<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Element Plus 表单</title>
    <!-- 引入 Vue 3 -->
    <script src="https://unpkg.com/vue@3.5.13/dist/vue.global.js"></script>
    <!-- 引入 Element Plus -->
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus@2.9.4/dist/index.full.js"></script>
  <style>
    #app {
      max-width: 800px;
      margin: 20px auto;
      padding: 20px;
      background-color: #f5f5f5;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <div id="app">
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px" size="default">
      <!-- 输入框 -->
      <el-form-item label="用户名" prop="username">
        <el-input v-model="formData.username" placeholder="请输入用户名"></el-input>
      </el-form-item>

      <!-- 密码输入框 -->
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="formData.password" placeholder="请输入密码"></el-input>
      </el-form-item>

      <!-- 单选按钮 -->
      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="formData.gender">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 复选框 -->
      <el-form-item label="爱好" prop="hobbies">
        <el-checkbox-group v-model="formData.hobbies">
          <el-checkbox label="读书"></el-checkbox>
          <el-checkbox label="看电影"></el-checkbox>
          <el-checkbox label="旅游"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <!-- 下拉菜单 -->
      <el-form-item label="所在城市" prop="city">
        <el-select v-model="formData.city" placeholder="请选择城市">
          <el-option label="北京" value="beijing"></el-option>
          <el-option label="上海" value="shanghai"></el-option>
          <el-option label="广州" value="guangzhou"></el-option>
          <el-option label="深圳" value="shenzhen"></el-option>
        </el-select>
      </el-form-item>

      <!-- 开关 -->
      <el-form-item label="是否已阅读协议？" prop="agreement">
        <el-switch v-model="formData.agreement"></el-switch>
      </el-form-item>

      <!-- 评分 -->
      <el-form-item label="评分" prop="score">
        <span>--{{formData.score}}--</span>
        <el-rate v-model="formData.score" :max="5"></el-rate>
      </el-form-item>

      <!-- 时间选择器 -->
      <el-form-item label="选择时间" prop="time">
        <el-time-select
          v-model="formData.time"
          :picker-options="{
            start: '08:30',
            step: '00:15',
            end: '18:30'
          }"
          placeholder="选择时间"
        >
        </el-time-select>
      </el-form-item>

      <!-- 日期选择器 -->
      <el-form-item label="选择日期" prop="date">
        <el-date-picker
          v-model="formData.date"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>

      <!-- 按钮 -->
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>

  <script>
    const { createApp, ref, onMounted } = Vue;
    const { ElForm, ElFormItem, ElInput, ElRadioGroup, ElRadio, ElCheckboxGroup, ElCheckbox, ElSelect, ElOption, ElSwitch, ElRate, ElTimeSelect, ElDatePicker, ElButton, ElMessage } = ElementPlus;

    createApp({
      setup() {
        const formRef = ref(null);
        const formData = ref({
          username: '',
          password: '',
          gender: '',
          hobbies: [],
          city: '',
          agreement: false,
          score: 0,
          time: '',
          date: ''
        });

        const rules = {
          username: [
            { required: true, message: '用户名不能为空', trigger: 'blur' },
            { min: 3, max: 10, message: '用户名长度必须在 3 到 10 个字符之间', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '密码不能为空', trigger: 'blur' },
            { min: 6, message: '密码长度至少为 6 个字符', trigger: 'blur' }
          ],
          gender: [
            { required: true, message: '请选择性别', trigger: 'change' }
          ],
          hobbies: [
            { type: 'array', required: true, message: '请至少选择一个爱好', trigger: 'change' }
          ],
          city: [
            { required: true, message: '请选择所在城市', trigger: 'change' }
          ],
          agreement: [
            { type: 'boolean', required: true, message: '请阅读并同意协议', trigger: 'change' }
          ],
          score: [
            { type: 'number', required: true, message: '请进行评分', trigger: 'change' },
            { max: 5, message: '评分不能超过 5', trigger: 'change' }
          ],
          time: [
            { required: true, message: '请选择时间', trigger: 'change' }
          ],
          date: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ]
        };

        const submitForm = () => {
          formRef.value.validate((valid) => {
            if (valid) {
              ElMessage.success('表单提交成功');
            } else {
              ElMessage.error('表单校验失败，请检查输入');
              return false;
            }
          });
        };

        const resetForm = () => {
          formRef.value.resetFields();
        };

        return {
          formData,
          rules,
          formRef,
          submitForm,
          resetForm
        };
      }
    }).use(ElementPlus).mount('#app');
  </script>
</body>
</html>